@charset "UTF-8";
body { min-width: 1280px; min-height: 100vh; overflow-x: auto; background-color: #000; background-image: url("../image/main_bg.jpg"); background-attachment: fixed; background-size: 1920px 1080px; font-size: 14px; color: #d2d2d2; }

.pagemain { position: relative; }

input, textarea { font-family: 'microsoft yahei' !important; }

@font-face { font-family: 'Conv_Helvetica-Roman-SemiB'; src: url("../fonts/Helvetica-Roman-SemiB.eot"); src: url("../fonts/Helvetica-Roman-SemiB.woff") format("woff"), url("../fonts/Helvetica-Roman-SemiB.ttf") format("truetype"), url("../fonts/Helvetica-Roman-SemiB.svg") format("svg"); font-weight: normal; font-style: normal; }
/*甯哥敤*/
.textover, .page1 .page-left .customer ul li .wea span, .page1 .page-left .customer ul li .wea strong, .page2 .area .con li, .page4 .area .con li, .page4 .ticlist .con li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.bg10white, .center-main .leftcon .voice .top .row .num, .center-main .leftcon .voice .rank .box, .center-main .rightcon .consumer .box li .vol, .numbox i, .page1 .page-left .customer ul li .vol, .page5 .customer .c1 .box li .vol, .page7 .leftcon, .wtime, .page8 .leftcon .qing .rate li .vol { background-color: rgba(255, 255, 255, 0.1); }
#tooltip {
    border: 1px solid #444;
    font-size: 14px;
    max-width: 205px;
    padding: 5px 10px;
    position: absolute;
    z-index: 2000;
    text-shadow: none;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
.time-filter { color: #fff; height: 50px; line-height: 34px;}
.time-filter .btn-group{width: 100%; height: 60px; line-height: 68px; font-size: 0;cursor: pointer;overflow: hidden;padding-left: 25px; background: url("../image/huaxiang-title.png") no-repeat;}
.time-filter .btn-group .btnn{width: 85px; height: 35px; font-size: 14px; background-color: #099fac;border: none;border-radius: 8px 0 0 8px;}
.time-filter .btn-group .day{border-radius: 8px 0 0 8px;outline:none;}
.time-filter .btn-group .month{border-radius: 0 8px 8px 0;outline:none;}
.time-filter .btn-group .act{background-color: rgba(109, 13, 13, 0.1);color: #808080;}
.time-filter div { float: left; }
.time-filter .name { margin-left: 10px; }
.time-filter .to { margin-left: 10px; margin-right: 10px; }
.time-filter input { width: 150px; height: 32px; line-height: 28px; border: #099fac 1px solid; background: #000000; border-radius: 5px; overflow: hidden; text-indent: 1em; color: #099fac; background: url("../image/dateico.png") 95% center no-repeat; }
.time-filter select { min-width: 180px; height: 36px; border: #099fac 1px solid; background: #000000; color: #099fac; }
.time-filter .btn { height: 34px; border-radius: 5px; border: #099fac 1px solid; overflow: hidden; padding: 0 28px; color: #000; cursor: pointer; background: #099fac; margin-left: 15px; }
.time-filter .btn2 { background: transparent; border: #099fac 1px solid; color: #099fac; padding: 0 15px; }

.fontnum, .page5 .sex .name strong, .page12 .right .user .con .name .p2 { font-family: 'Conv_Helvetica-Roman-SemiB', Sans-Serif; }

/*甯哥敤 end*/
.center-main { padding: 0 20px 20px; max-width: 1745px; overflow: hidden; margin: auto; position: relative; color: #fff; font-size: 12px; }
/* 左侧 */
.center-main .leftcon { 
    /* width: 470px;  */
    width:30%;
    float: left; 
    overflow: hidden; 
    margin-top: 23px; 
}
/* 天气分析 */
.center-main .leftcon .weather { 
    /* width: 462px; */
    width:100%;
    height: 240px;
    padding:0 10PX;
    overflow: hidden;
    background: url("../image/weatherbg.png") no-repeat; 
    background-size:100% 100%;
  }
.center-main .leftcon .weather .con { position: relative; width: 100%; margin: auto; margin-top: 60px; }
.center-main .leftcon .weather .con .t1 { color: #fff; font-size: 13px; font-weight: bold; margin-left: 5px; }
.center-main .leftcon .weather .con .t1 span { padding-right: 7px; }
.center-main .leftcon .weather .con .t2 { overflow: hidden; margin-top: 5px; }
.center-main .leftcon .weather .con .t2 .temp { float: left; font-size: 40px; color: #099fac; }
.center-main .leftcon .weather .con .t2 .wea { float: left; margin-left: 15px; height: 45px; padding-left: 15px; margin-top: 10px; border-left: #099fac 1px solid; color: #099fac; }
.center-main .leftcon .weather .con .wico { position: absolute; right: 0; top: -15px; }
.center-main .leftcon .weather .con .wlist { margin-top: 10px; }
.center-main .leftcon .weather .con .wlist ul { width: 108%; }
.center-main .leftcon .weather .con .wlist li { width: 70px; float: left; text-align: center; }
.center-main .leftcon .weather .con .wlist li .name { font-size: 12px; width: 65px; margin: auto; height: 24px; line-height: 24px; border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.center-main .leftcon .weather .con .wlist li .img { width: 100%; margin: auto; margin-top: 5px; border-right: rgba(255, 255, 255, 0.1) 1px solid; }
.center-main .leftcon .weather .con .wlist li .img img { width: 50px; display: block; margin: auto; }
.center-main .leftcon .weather .con .wlist li:nth-last-child(1) .img { border: none; }

.small-num-index, .center-main .leftcon .voice .rank .box li .ico, .center-main .rightcon .consumer .box li .name i, .page1 .page-left .customer ul li .name i, .page5 .customer .c1 .box li .name i, .page8 .leftcon .qing .rate li .name i, .page5 .row .pro-box .profession .box li .name i{ width: 15px; height: 13px; border-radius: 3px; background: #fff; color: #000; margin-top: 3px; text-align: center; line-height: 12px; float: left; font-size: 12px; vertical-align: middle; }

/* 近七天客流量 */
.center-main .leftcon .volume { 
  position: relative;
  /* width: 462px;  */
  width:100%;
  height: 250px; 
  margin-top: 10px; 
  overflow: hidden; 
  background: url("../image/volume.png") top center no-repeat; 
  background-size:100% 100%;
}
.center-main .leftcon .volume .top { position: absolute; right: 10px; top: 6px; color: #fff; font-size: 14px; line-height: 28px; }
.center-main .leftcon .volume .top span { display: inline-block; height: 25px; background: #fbed47; padding: 0 15px; color: #000; line-height: 25px; font-weight: bold; }
.center-main .leftcon .volume .chartcon {  position: absolute; left: 0; top: 0px; width:100%; height: 250px; }

/* 语音画册 */
.center-main .leftcon .voice { 
  position: relative; 
  /* width: 462px;  */
  width:100%;
  height: 380px; 
  margin-top: 10px; 
  overflow: hidden; 
  background: url("../image/voice.png") top center no-repeat; 
  background-size:100% 100%;
}
.center-main .leftcon .voice .top { 
  /* width: 422px;  */
  margin-top:50px; 
  margin-left: 20px; 
}
.center-main .leftcon .voice .top .row { width: 100%; height: 36px; overflow: hidden; white-space: nowrap; line-height: 38px; margin-bottom: 10px; }
.center-main .leftcon .voice .top .row .text { float: left; }
.center-main .leftcon .voice .top .row .num {float: left; height: 36px; padding: 0 6px; color: #fbed47; font-size: 20px; margin-left: 5px; margin-right: 5px; }
.center-main .leftcon .voice .rank { 
  position: absolute; 
  left: 10px; 
  bottom: 10px; 
  width:calc(100% - 20px);
  /* width: 410px;  */
  margin: auto; 
}
.center-main .leftcon .voice .rank .box 
{ width: calc(50% - 5px); 
  height: 170px; 
}
.center-main .leftcon .voice .rank .box li { width: 160px; margin-left: 18px; margin-top: 15px; overflow: hidden; }
.center-main .leftcon .voice .rank .box li .text { width: 135px; white-space: nowrap; float: left; margin-left: 5px; font-size: 12px; height: 16px; vertical-align: top; }
/* 中间 */
.center-main .centercon { 
    position: relative; 
    /* width: 770px;  */
    width:40%;
    height: 984px;
     float: left;
      margin-top: 20px;
       text-align: center;
        overflow: hidden; 
    }
.center-main .centercon .online { 
  display: inline-block; 
  margin-top: 35px; 
  height: 113px;
}
.center-main .centercon .online .text { font-size: 20px; color: #099fac; font-weight: bold; text-align: left; padding-left: 5px; }
.center-main .centercon .online .number { display: flex;margin-top: 10px;}
.center-main .centercon .online .number li{ width: 49px;height: 66px;font-size: 55px;line-height: 66px; color: #30c1ae; border: 1px solid #2a4044;background-color: rgba(255, 255, 255, 0.1);margin-left: 5px;}
.center-main .centercon .online .num { margin-top: 10px; }
.center-main .centercon .online .num i { width: 50px; height: 68px; display: inline-block; margin-left: 4px; margin-right: 4px; background: url(../image/number3.png) no-repeat; background-position: 0 0; }

/* 地图 */
.center-main .centercon .bmap-wrap { position: relative; width: 100%; height: 725px; margin: auto; margin-top: 20px; text-align: left; }
.center-main .centercon .bmap-wrap #baidumap { width: 100%; height: 725px; }


.center-main .centercon .bmap-wrap .point-type { z-index: 12345; position: absolute; width: 135px; right: -35px; top: 600px; }
.center-main .centercon .bmap-wrap .point-type li { overflow: hidden; margin-top: 8px; }
.center-main .centercon .bmap-wrap .point-type li i { width: 12px; height: 12px; display: block; overflow: hidden; border-radius: 12px; margin-top: 5px; float: left; background-color: #0c7fd8; }
.center-main .centercon .bmap-wrap .point-type li p { color: #ffffff; float: left; margin-left: 5px; }
.center-main .centercon .bmap-wrap .point-type li:nth-child(1) i { background-color: #fbed47; }
.center-main .centercon .bmap-wrap .point-type li:nth-child(2) i { background-color: #7a53fc; }
.center-main .centercon .bmap-wrap .point-type li:nth-child(3) i { background-color: #0c7fd8; }
.center-main .centercon .bmap-wrap .point-type li:nth-child(4) i { background-color: #ff6c00; }
.center-main .centercon .bmap-wrap .point-type li:nth-child(5) i { background-color: #da1b24; }
.center-main .centercon .bmap-wrap .point-type li:nth-child(6) i { background-color: #2ced3e; }
/* 右侧 */
.center-main .rightcon { 
    position: absolute;
     right: 15px;
      top: 0px;
       overflow: hidden; 
       /* width: 496px; */
       width:30%;
        margin-top: 20px;
         margin-left: 20px; 
        }
/* 今日统计 */
.center-main .rightcon .ticket { 
  position: relative; 
  /* width: 492px;  */
  width:100%;
  height: 192px; 
  background: url("../image/ticket.png") no-repeat ; 
  background-size:100% 100%;
}
.center-main .rightcon .ticket .left { 
  width: calc(50% - 15px); 
  height: 128px; 
  position: absolute; 
  left: 10px; 
  top: 40px;
}
.center-main .rightcon .ticket .right { 
  width: calc(50% - 15px); 
  height: 128px; 
  position: absolute; 
  right: 10px; 
  top: 40px;
}
.center-main .rightcon .ticket .left .total,.center-main .rightcon .ticket .right .total{ 
  text-align: center; line-height: 145px; font-size: 16px; color: #099fac;}

.center-main .rightcon .ticket .left .total .xiaoNum,.center-main .rightcon .ticket .right .total .peopleNum{ font-size: 36px;}
.center-main .rightcon .ticket .left .total span{ text-align: center; line-height: 145px; font-size: 20px; color: #099fac;}
.center-main .rightcon .ticket .chartcon { position: absolute; width: 220px; height: 139px; left: 239px; top: 50px; }
.center-main .rightcon .ticket .legend{ position: absolute; width: 160px; height: 139px; left: 400px; top: 80px; }
.center-main .rightcon .ticket .legend li:nth-child(2) i{ background: #0069ad !important; }
.center-main .rightcon .ticket .legend li:nth-child(3) i{ background: #003d64 !important }

/* 客流饱和度、停车场使用率 */
.center-main .rightcon .saturation { 
  position: relative; 
  margin-top: 10px; 
  /* width: 492px;  */
  width:100%;
  height: 180px; 
  background: url("../image/saturation.png") no-repeat; 
  background-size:100% 100%;
}
.center-main .rightcon .saturation .chartcon {
  position: absolute; 
  top: 30px; 
  width: calc(50% - 15px); 
  height: 155px;  
}
.center-main .rightcon .saturation .box1 { 
  left: 10px; 
}
.center-main .rightcon .saturation .box2 { 
  right: 10px; 
}

/* 客源地统计 */
.center-main .rightcon .consumer { 
  position: relative; 
  margin-top: 10px; 
  /* width: 492px;  */
  width:100%;
  height: 250px; 
  background: url("../image/customer.png") no-repeat; 
  background-size:100% 100%;
}
.center-main .rightcon .consumer .box { 
  position: absolute; 
  top: 50px; 
  /* width: 457px;  */
  width:calc(50% - 50px);
  height: 222px; 
}
.center-main .rightcon .consumer .box li {
  /* width: 235px;  */
  width:100%;
  height: 34px; 
  margin-top: 5px; 
}
.center-main .rightcon .consumer .box li .name { font-size: 12px; color: #fff; }
.center-main .rightcon .consumer .box li .name i { margin-top: 4px; }
.center-main .rightcon .consumer .box li .name span { margin-left: 8px; }
.center-main .rightcon .consumer .box li .name strong { color: #fbed47; font-weight: bold; margin-left: 6px; font-size: 13px; }
.center-main .rightcon .consumer .box li .vol { width: 100%; height: 8px; margin-top: 3px; border-radius: 8px; overflow: hidden;}
.center-main .rightcon .consumer .box li .vol span { display: block; width: 100px; -webkit-transition: all 1s; height: 8px; border-radius: 8px; overflow: hidden; background-image: linear-gradient(90deg, #4bb6fb 0%, #489b28 100%), linear-gradient(#099fac, #099fac); background-blend-mode: normal, normal; }
.center-main .rightcon .consumer .box2 { 
  right: 20px; 
}
.center-main .rightcon .consumer .box1 { 
  left:20px; 
}

/* 景区驻留时长 */
.center-main .rightcon .reside { 
  position: relative; 
  margin-top: 10px; 
  /* width: 492px;  */
  width:100%;
  height: 243px; 
  background: url("../image/reside.png") no-repeat;
  background-size:100% 100%; 
}
.center-main .rightcon .reside .chartcon { 
  position: absolute; 
  left: 15px; 
  top: 15px; 
  /* width: 500px;  */
  width:calc(100% - 30px);
  height: 253px; 
}

.page-top-tab-nav { overflow: hidden; width: 100%; height: 55px; border-bottom: #2f2f2f 1px solid; }
.page-top-tab-nav li { float: left; margin-right: 35px; height: 52px; line-height: 52px; cursor: pointer; }
.page-top-tab-nav li.current { border-bottom: #099fac 3px solid; }
.page-top-tab-nav a { font-size: 14px; color: #fff; display: block; }
.page-top-tab-nav a:hover { text-decoration: none; }

.numbox { color: #fff; font-size: 14px; line-height: 26px; text-align: left; }
.numbox span { display: inline-block; line-height: 26px; vertical-align: top; }
.numbox i { font-size: 20px; color: #fbed47; font-weight: 400; vertical-align: top; display: inline-block;width: 20px; text-align: center; margin-right: 5px; line-height: 26px; }

/* 内页1 热力图*/
.page1 .page-left { width: 40%; float: left; margin-top: 25px; }
/* 实时在园人数 */
.page1 .page-left .online-box { width: 100%; height: 361px; position: relative; overflow: hidden; background: url("../image/p1-online.png?v") no-repeat; text-align: center; vertical-align: top; background-size:100% 100%;}
.page1 .page-left .online-box .text { display: inline-block; line-height: 94px; vertical-align: top; font-size: 16px; font-weight: bold; padding-right: 15px; }
.page1 .page-left .online-box .num { margin-top: 18px; display: inline-block; }
.page1 .page-left .online-box .num .am_num #total{ display: flex;}
/* .page1 .page-left .online-box .num .am_num #total li{ text-align: center; width: 50px; height: 66px;line-height: 66px; border: 1px solid #364c52;margin-right: 5px;color: #30c1ae; font-size: 55px;background-color: rgba(255, 255, 255, 0.1)} */
.page1 .page-left .online-box .num i { width: 50px; height: 68px; display: inline-block; margin-left: 4px; margin-right: 4px; background: url(../image/number3.png) no-repeat; background-position: 0 0; }
.page1 .page-left .online-box .chart-name { 
  position: absolute; 
  left: 10px; 
  top: 127px; 
  width: calc(100% - 20px); 
  height: 50px; 
}
.page1 .page-left .online-box .chart-name li { width: 33%; height: 30px; float: left; color: #fff; }
.page1 .page-left .online-box .chartcon { position: absolute; left: 10px; top: 157px; width: calc(100% - 20px); height: 140px;}
.page1 .page-left .online-box .total { position: absolute; width: calc(100% - 20px); height: 49px; left: 10px; top: 305px;}
/* 当月 客流量 */
.page1 .page-left .customer { 
  position: relative; 
  overflow: hidden; 
  width:100%;
  height: 220px; 
  margin-top: 7px; 
  background: url("../image/p1customer.png") no-repeat; 
  background-size:100% 100%;
}
.page1 .page-left .customer ul { width: calc(100% - 30px); margin: auto; margin-top: 50px; }
.page1 .page-left .customer ul li { width: 100%; overflow: hidden; margin-top: 12px; }
.page1 .page-left .customer ul li .name { font-size: 14px; color: #fff; float: left; }
.page1 .page-left .customer ul li .name i { margin-top: 4px; }
.page1 .page-left .customer ul li .name span { margin-left: 8px;}
.page1 .page-left .customer ul li .vol { width: 39%; float: left; margin-left: 10px; height: 13px; margin-top: 4px; border-radius: 8px; overflow: hidden; }
.page1 .page-left .customer ul li .vol span { display: block; height: 13px; border-radius: 5px; overflow: hidden; background-image: linear-gradient(90deg, #099fac 0%, #489b27 100%), linear-gradient(#099fac, #099fac); background-blend-mode: normal, normal; }
.page1 .page-left .customer ul li .wea { float: right; }
.page1 .page-left .customer ul li .wea span { width: 50px; height: 20px; line-height: 20px; display: inline-block; float: left; }
.page1 .page-left .customer ul li .wea strong { width: 126px; display: inline-block; height: 20px; line-height: 20px; }
/* 客流分时段 */
.page1 .page-left .cus-time { 
  width: 100%; 
  height: 300px; 
  position: relative; 
  background: url("../image/p1cus-times.png") no-repeat; 
  margin-top: 8px; 
  background-size:100% 100%;
}
.page1 .page-left .cus-time .chartcon{ position: absolute; left: 10px; top: 8px; width:calc(100% - 20px); height: 310px;}
/* 右侧 */
.page1 .page-right { 
  width: calc(60% - 10px); 
  height: 896px; 
  position: relative; 
  float: right; 
  background: url("../image/p1hot.png") no-repeat;
  background-size:100% 100%;
  margin-top: 25px; 
  margin-left: 10px; 
}
.page1 .page-right .top-time { 
  position: absolute; 
  top: 22px; 
  left: 50%; 
  transform: translateX(-50%);
  width: 485px; 
  height: 59px; 
  border-radius: 59px; 
  border: #099fac 1px solid; 
  font-size: 30px; 
  text-align: center; 
  line-height: 58px; 
  color: #099fac; 
}
.page1 .time-filter { position: absolute; left: 10px; top: 115px; }
.page1 .bmap-div { position: absolute; left: 10px; top: 160px; width:calc(100% - 20px); height: 670px; }
.page1 .bmap-sate { position: absolute; left: 10px ; top: 160px; width: 950px; height: 650px; }
/*热力图底部时间轴*/
.page1 .hour { width: calc(100% - 20px); height: 55px; position: absolute; left:10px; bottom:15px;  }
.page1 .hour .line { width: 100%; height: 40px;  overflow: hidden; *zoom: 1; }
.page1 .hour  .wline{ position: absolute; width: 100%; left:0; top: 5px; height: 1px; background: #132e3f; }
.page1 .hour .line li { 
  position: relative; 
  z-index: 12; 
  margin-top: 2px; 
  width: 30px; 
  height: 40px;  
  background: url("../image/relispot.png") top center no-repeat;  
  float: left; 
  cursor: pointer; 
  font-size: 12px; 
  padding-top: 11px; 
  color: #099fac; 
  text-align: center;
}
.page1 .hour .line .on { background-position: 0 -40px; }
#spotWrap { position: absolute; left: 15px; top: 0; width: 1632px; height: 15px; /* background: rgba(100, 31, 31, 1);*/ }
#spotWrap .star { z-index: 123; position: absolute; left: 0; top: -14px; width: 40px; height: 40px; margin-left: -20px;
    background: url("../image/c-hour-on.png") center bottom no-repeat; -webkit-transition: all 0.5s }
.hour .spot { position: absolute; height: 20px; margin-left: -5px; /*background: #00a0e9;*/ z-index: 12345; cursor: pointer; user-select: none; -webkit-user-select: none; }
/*.hour .spot:hover { background: #fff8d5; }*/
.tooltip { position: absolute; top: -28px; z-index: 521070; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px;
    -webkit-transition: all 0.5s }
.tooltip.left { padding: 0 5px; margin-left: -3px }
.tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #2D59AF; border-radius: 4px }
.tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid }
.tooltip.top .tooltip-arrow { bottom: -5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0 5px; border-top-color: #2D59AF }
.bili { z-index: 1234567; position: absolute; left: 10px; bottom: 100px; width: 388px; height: 67px; overflow: hidden; background: url("../image/bili.png") no-repeat; }

/* 内页1-2 客流预测分析 */
.page2 .day { 
  position: relative; 
  width: 60%; 
  height: 410px; 
  margin-top: 20px; 
  overflow: hidden; 
  background: url("../image/p2day.png?v2") no-repeat; 
  background-size:100% 100%;
}
.page2 .day .time-filter { position: absolute; left: 20px; top: 58px; }
.page2 .day .chartcon { position: absolute; left: 10px; top: 80px; width: calc(100% - 20px); height: 330px; ; }
.page2 .area { 
  position: absolute; 
  right: 10px; 
  top: 95px; 
  width: calc(40% - 20px); 
  height: 373px; 
  background: url("../image/p2area.png") no-repeat; 
  background-size:100% 100%;
}
.page2 .area .con { position: absolute; left: 20px; top: 45px; }
.page2 .area .con li { background: rgba(0, 0, 0, 0.3); width: 479px; height: 40px; line-height: 40px; margin-top: 10px; }
.page2 .area .con li i { display: block; width: 8px; height: 8px; border-radius: 8px; margin-top: 15px; float: left; overflow: hidden; background: #099fac; margin-left: 25px; margin-right: 10px; }
.page2 .sev { 
  position: relative; 
  width:100%; 
  height: 493px; 
  margin-top: 20px; 
  overflow: hidden; 
  background: url("../image/p2-sev.png") no-repeat; 
  background-size:100% 100%;
}
.page2 .sev .chartcon { position: absolute; left: 10px; top: 35px; ; width: calc(100% - 20px); height: 470px; }

/* 内页1-3 客流接待同比 */
.page3 .day-cons { 
  position: relative; 
  width: 100%; 
  height: 431px; 
  margin-top: 20px; 
  background: url("../image/p3day.png") no-repeat; 
  background-size: 100% 100%;
}
.page3 .day-cons .time-filter { position: absolute; left: 25px; top: 55px; }
.page3 .day-cons .chartcon { position: absolute; left: 0px; top: 85px; width:100%; height: 320px;  ; }

.page3 .yuqing { position: relative; width: 100%; height: 451px; margin-top: 20px; background: url("../image/yuqing.png") no-repeat; }
.page3 .yuqing .time-filter { position: absolute; left: 25px; top: 55px; }
.page3 .yuqing .chartcon { position: absolute; left: 0px; top: 85px; width: 100%; height: 320px;  ; }

.page3 .row { margin-top: 20px; overflow: hidden; }
.page3 .month { 
  position: relative; 
  width: calc(50% - 5px); 
  height: 492px; 
  overflow: hidden; 
  background: url("../image/p3month.png") no-repeat; 
  background-size: 100% 100%;
}
.page3 .month .time-filter { position: absolute; left: 20px; top: 60px; }
.page3 .month .chartcon { position: absolute; left: 10px; top: 110px; width:calc(100% - 20px); height: 369px; ; }
.page3 .month .time-filter { position: absolute; left: 20px; top: 60px; }

.page3 .leixing { position: relative; width:calc(50% - 30px); height: 462px; overflow: hidden; background: url("../image/leixing.png") no-repeat; background-size:100% 100%;}
.page3 .leixing .time-filter { position: absolute; left: 20px; top: 60px; }
.page3 .leixing .chartcon { position: absolute; left: 10px; top: 48px; width:calc(100% - 20px); height: 440px;}
/* .page3 .leixing .time-filter { position: absolute; left: 20px; top: 60px; } */

.page3 .year { 
  position: relative; 
  width: calc(50% - 5px); 
  height: 492px; 
  overflow: hidden; 
  margin-right: 3px; 
  background: url("../image/p3year.png") no-repeat; 
  background-size: 100% 100%;
}
.page3 .qinggan { position: relative; width: calc(50% - 30px); height: 462px; overflow: hidden; margin-right: 3px; background: url("../image/qinggan.png") no-repeat;background-size:100% 100%; }
.page3 .year .time-filter { position: absolute; left: 20px; top: 60px; }
.page3 .year .chatcon { position: absolute; left: 10px; top: 110px; width:calc(100% - 20px); height: 370px; ; }

.page3 .qinggan .time-filter { position: absolute; left: 20px; top: 60px; }
.page3 .qinggan .chatcon { position: absolute; left: 10px; top: 110px; width:calc(100% - 20px); height: 370px; ; }

/* 内页1-4 车流购票时段分析 */
.page4 .row { overflow: hidden; margin-bottom: 20px; }
.page4 .car { 
  position: relative; 
  width: 60%; 
  height: 440px; 
  float: left; 
  margin-top: 20px; 
  overflow: hidden; 
  background: url("../image/p4car.png?v2") no-repeat;
  background-size: 100% 100%; 
}
.page4 .car .time-filter { position: absolute; left: 20px; top: 58px; }
.page4 .car .chartcon { position: absolute; left: 10px; top: 115px; width: calc(100% - 20px); height: 320px; ; }
.page4 .area { 
  position: relative; 
  float: right; 
  margin-top: 58px; 
  width: calc(40% - 20px); 
  height: 373px; 
  background: url("../image/p4car2.png") no-repeat; 
  background-size: 100% 100%;
}
.page4 .area .con { position: absolute; left: 20px; top: 45px; }
.page4 .area .con li { background: rgba(0, 0, 0, 0.3); width: 479px; height: 40px; line-height: 40px; margin-top: 10px; }
.page4 .area .con li i { display: block; width: 8px; height: 8px; border-radius: 8px; margin-top: 15px; float: left; overflow: hidden; background: #099fac; margin-left: 25px; margin-right: 10px; }
.page4 .tic { 
  position: relative; 
  width: 60%; 
  height: 440px; 
  float: left; 
  overflow: hidden; 
  background: url("../image/p4tic.png?v2") no-repeat; 
  background-size: 100% 100%;
}
.page4 .tic .time-filter { position: absolute; left: 20px; top: 58px; }
.page4 .tic .chartcon { position: absolute; left: 10px; top: 115px; width: calc(100% - 20px); height: 320px; ; }
.page4 .ticlist { 
  position: relative; 
  float: right; 
  margin-top: 38px; 
  width: calc(40% - 20px); 
  height: 373px; 
  background: url("../image/p4ticlist.png") no-repeat; 
  background-size: 100% 100%;
}
.page4 .ticlist .con { position: absolute; left: 20px; top: 45px; }
.page4 .ticlist .con li { background: rgba(0, 0, 0, 0.3); width: 479px; height: 40px; line-height: 40px; margin-top: 10px; }
.page4 .ticlist .con li i { display: block; width: 8px; height: 8px; border-radius: 8px; margin-top: 15px; float: left; overflow: hidden; background: #099fac; margin-left: 25px; margin-right: 10px; }

.row { overflow: hidden; }

/* 内页2 游客画像 */
.page5 .sex { 
  position: relative; 
  width: calc(34% - 30px); 
  height:390px; 
  float: left; 
  background: url("../image/p5sex.png?v3") no-repeat; 
  background-size: 100% 100%;
}
.page5 .sex .chartcon { position: absolute; top: 65px; ; width: calc(50% - 25px); height: 240px; }
.page5 .sex .c1 { left: 20px; }
.page5 .sex .c2 { right: 20px; }
.page5 .sex .name { position: absolute; top: 305px; width: calc(50% - 25px); height: 65px; line-height: 60px; text-align: center; font-size: 16px; color: #8e8e8f; }
.page5 .sex .name span { vertical-align: middle; margin-right: 15px; color: #fff; vertical-align: 1px; }
.page5 .sex .name strong { color: #fbed47; font-weight: 400; font-size: 30px; vertical-align: middle; display: inline-block; padding-left: 10px; border-left: #8e8e8f 1px solid; height: 28px; line-height: 28px; }
.page5 .age { 
  position: relative; 
  float: left;
  width: 22%; 
  height: 390px; 
  margin-left: 10px;
  background: url("../image/p5age.png?v2") no-repeat; 
  background-size: 100% 100%;
  /* margin-left: 13px;  */
}
.page5 .age .chartcon { position: absolute; width: calc(100% - 6px); height: 390px; left: 3px; top: 30px; ; }
.page5 .sex .sexico{ 
  position: absolute; 
  top: 163px; 
  width: 30px; 
  height:30px;
}
.page5 .sex .s1 { 
  background: url("../image/sex1.png") center center no-repeat; 
  background-size: 100% 100%;
  left:23%;
}
.page5 .sex .s2 { 
  background: url("../image/sex2.png") center center no-repeat; 
  right: 23%; 
  background-size: 100% 100%;
}
.page5 .starsign { 
  position: relative; 
  float: left; 
  width: 22%; 
  height:390px; 
  margin-left: 10px;
  background: url("../image/p5starsign.png?v2") no-repeat; 
  background-size: 100% 100%;
}
.page5 .starsign .chartcon { position: absolute; width: calc(100% - 20px); height: 390px; left: 10px; top:-15px; }
.page5 .trip { 
  position: relative; 
  float: left; 
  width:22%; 
  height: 390px; 
  margin-left: 10px;
  background: url("../image/p5trip.png?v2") no-repeat; 
  background-size: 100% 100%;
}
.page5 .trip .chartcon { position: absolute; width:calc(100% - 4px); height: 390px; left: 2px; top: 10px;}

.page5 .customer { 
  position: relative; 
  width: calc(70% - 30px); 
  height: 370px; 
  background: url("../image/p5coustomer.png?v2") no-repeat;
  background-size: 100% 100%; 
  float: left; 
}
.page5 .customer .chartcon { position: absolute;  ; }
.page5 .customer .c1 { width: calc(60% - 50px); height: 336px; left: 20px; top: 100px; background: none; }
.page5 .customer .c1 .box { position: absolute; top: 0; width: calc(50% - 30px); height: 230px; }
.page5 .customer .c1 .box li { width: 100%; height: 36px; margin-top: 10px; }
.page5 .customer .c1 .box li .name { font-size: 12px; color: #fff;}
.page5 .customer .c1 .box li .name i { margin-top: 4px; }
.page5 .customer .c1 .box li .name span { margin-left: 8px; }
.page5 .customer .c1 .box li .name strong { color: #fbed47; font-weight: bold; margin-left: 6px; font-size: 13px; }
.page5 .customer .c1 .box li .vol { width: 205px; height: 8px; margin-top: 3px; border-radius: 8px; overflow: hidden;}
.page5 .customer .c1 .box li .vol span { display: block; height: 8px; border-radius: 8px; overflow: hidden; background-image: linear-gradient(90deg, #4bb6fc 0%, #489b27 100%), linear-gradient(#099fac, #099fac); background-blend-mode: normal, normal; }
.page5 .customer .c1 .box1 { right: 20px; }
.page5 .customer .c1 .box2 { left: 20px; }
.page5 .customer .bmap{ position: absolute; right: 20px; top: 60px; overflow: hidden; width: 40%; height: 420px;}
.page5 .customer .c2 { position: absolute; width: calc(100% - 10px); height: 279px; left: 5px; top: 25px; }

.page5 .row .pro-box { 
  width: 30%; 
  height: 370px;
  position: absolute;
  right: 20px;
}
.page5 .row .pro-box .profession{
  width: 100%; 
  height: 276px; 
  background: url("../image/profession.png?v2") no-repeat;
  background-size: 100% 100%;
}
.page5 .row .pro-box .profession .box { position: absolute; left: 20px; top:0; width:calc(100% - 40px); height: 222px; }
.page5 .row .pro-box .profession .box ul{ margin-top: 60px;padding: 20px;}
.page5 .row .pro-box .profession .box li { width: 100%; height: 15px;margin-top: 15px; display: flex;align-items: center;}
.page5 .row .pro-box .profession .box li .name { font-size: 12px; width: 72px; color: #fff;}
.page5 .row .pro-box .profession .box li .name i { margin-top: 4px; }
.page5 .row .pro-box .profession .box li .name span { margin-left: 8px; }
.page5 .row .pro-box .profession .box li strong { color: #fbed47; font-weight: bold; margin-left: 6px; font-size: 13px; }
.page5 .row .pro-box .profession .box li .vol { width: 65%; height: 13px; margin-top: 3px; margin:0 10px; overflow: hidden;background-color: rgba(255, 255, 255, 0.1);}
.page5 .row .pro-box .profession .box li .vol span { display: block;width: 0%; height: 13px; border-radius: 3px; overflow: hidden; background-image: linear-gradient(90deg, #4bb6fc 0%, #489b27 100%), linear-gradient(#099fac, #099fac); background-blend-mode: normal, normal; }
.page5 .row .pro-box .statistics{
  width: 100%; 
  height: 84px; 
  background: url("../image/statistics.png?v2") no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  overflow: hidden;
}
.page5 .row .pro-box .statistics ul{display: flex; justify-content: center;width:calc(100% - 20px);margin: 52px auto; overflow: hidden;}
.page5 .row .pro-box .statistics ul li{width: 15%;background-color: #12656c;text-align: center; height: 25px; line-height: 25px;}
.page5 .row .pro-box .statistics ul .hidden{display: none;}
.page5 .row .pro-box .statistics ul li:nth-child(2){width: 15%;background-color: #137548;text-align: center;}
.page5 .row .pro-box .statistics ul li:nth-child(3){width: 15%;background-color: #197880;text-align: center;}
.page5 .row .pro-box .statistics ul li:nth-child(4){width: 15%;background-color: #115492;text-align: center;}
.page5 .row .pro-box .statistics ul li:nth-child(5){width: 20%;background-color: #099fac;text-align: center;}
.page5 .row .pro-box .statistics ul li:nth-child(6){width: 20%;background-color: #f97210;text-align: center;}


/* 内页2-2 游客逗留时长 */
.page6 .leftcon { position: relative; width: calc(60% - 20px); height: 874px; float: left; background: url("../image/p6leftmap.png") no-repeat;background-size: 100% 100%; }
.page6 .leftcon .time-filter { margin-top: 20px; margin-left: 20px; }
.page6 .leftcon .mapcon { position: relative; width: 100%; height: 830px; overflow: hidden; ; margin: auto; margin-top: 10px; }
.page6 .leftcon  .bmap { position: absolute; left: 0; top: 0; width: 100%; height: 830px; overflow: hidden; }
.page6 .right { width: 40%; float: right; overflow: hidden; margin-top: 20px; }
.page6 .right .local { position: relative; width: 100%; height: 432px; overflow: hidden; background: url("../image/p6local.png") no-repeat; background-size: 100% 100%;}
.page6 .right .local .chartcon { position: absolute; left: 15px; top: 50px; width: calc(100% - 20px); height: 365px; overflow: hidden; ; }
.page6 .right .province { position: relative; margin-top: 10px; width: 100%; height: 432px; overflow: hidden; background: url("../image/p6province.png") no-repeat; background-size: 100% 100%;}
.page6 .right .province .chartcon { position: absolute; left: 10px; top: 50px; width: calc(100% - 20px); height: 365px; overflow: hidden; ; }
/* 内页2-3 客源地分析 */
.page7 .leftcon { position: relative; width: 75%; height: 910px; float: left; }
.page7 .leftcon .time-filter { margin-top: 20px; margin-left: 20px; }
.page7 .leftcon .mapcon { position: relative; width: 100%; height: 830px; overflow: hidden;   margin: auto; margin-top: 10px; }
.page7 .leftcon .mapcon .bmap{ position: absolute; left: 0; top: -100px; width: 100%; height: 1000px; overflow: hidden; }
.page7 .right { position: relative; width: calc(25% - 20px); height: 910px; float: right; overflow: hidden; margin-top: 20px; background: url("../image/p7right.png") no-repeat; background-size: 100% 100%;}
.page7 .right .box { position: absolute; left: 50px; width: calc(100% - 100px); height: 350px; overflow: hidden; }
.page7 .right .box li { margin-top: 5px; line-height: 20px; overflow: hidden; }
.page7 .right .box li .ico { width: 20px; height: 30px; float: left; background: url("../image/p7ico.png") no-repeat; line-height: 20px; text-align: center; color: #000; font-size: 12px; }
.page7 .right .box li .name { float: left; margin-left: 10px; }
.page7 .right .box li .num { color: #feed48; font-weight: bold; float: right; margin-right: 18px; }
.page7 .right .c1 { top: 130px; }
.page7 .right .c2 { bottom: 30px; }

.wtime { padding: 23px; overflow: hidden; }

.legend{ position: absolute;}
.legend li{ color: #ebebeb; font-size: 12px; margin-top: 5px;}
.legend li i{ display: block; width: 10px; height: 7px; background: #099fac; float: left; border-radius: 5px; overflow: hidden; margin-top: 7px; margin-right: 5px;}

.mapchange { position: absolute; right: 30px; top: 115px; z-index: 1234567; border: #51ffff 2px solid; height: 33px; width: 100px;
    border-radius: 35px; overflow: hidden; }
.mapchange li { width: 50px; float: left; background: #020619; line-height: 33px; text-align: center; cursor: pointer }
.mapchange li.current { background: #51ffff; color: #020619; }

